<template>
  <Modal :title="isEdit ? '编辑': '新增'" width="45%" v-model="visible" @on-cancel="close">
    <Form ref="ent" :model="ent" :rules="formRules" :label-width="110"
          label-position="right" :close-on-press-escape="false" :close-on-click-modal="false">
      <FormItem label="Key:" prop="configKey">
        <Input placeholder="Key" v-model="ent.configKey"/>
      </FormItem>
      <FormItem label="Value:" prop="configValue">
        <Input type="textarea" placeholder="Value" v-model="ent.configValue"/>
      </FormItem>
      <FormItem label="分组:" prop="configType">
        <Input placeholder="配置分组 " v-model="ent.configType"/>
      </FormItem>
      <FormItem label="描述:" prop="configDesc">
        <Input type="textarea" placeholder="描述" v-model="ent.configDesc"/>
      </FormItem>
      <FormItem label="缓存时间:" prop="cacheExpireSecond">
        <Input placeholder="" v-model="ent.cacheExpireSecond"/>
      </FormItem>
      <FormItem label="状态" prop="isValid">
        <Select v-model="ent.isValid" style="width:200px">
          <Option v-for="item in
          [{label: '已删除', value: -1},
          {label: '前台不展示', value: 0},
          {label: '前后台都展示', value: 1}]" :value="item.value" :key="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem>
    </Form>
    <span slot="footer" class="dialog-footer">
                    <Button @click="close">取 消</Button>
                    <Button type="primary" @click="submit">确 定</Button>
        </span>
  </Modal>
</template>
<script>
import {
  save,
  update
} from '@/api/configApi'
import {formRules} from "./object";

export default {
  data() {
    this.formRules = formRules
    return {
      ent: {},
      isEdit: false,
      visible: false
    }
  },
  methods: {
    submit() {
      this.$refs.ent.validate((validate) => {
        if (validate) {
          this.isEdit ? this.update() : this.add()
        }
      })
    },
    add() {
      let req = {...this.ent}
      save(req).then(res => {
        this.$Message.success('保存成功');
        this.reload()
        this.close()
      })
    },
    update() {
      let req = {...this.ent}
      update(req).then(res => {
        this.$Message.success('修改成功');
        this.reload()
        this.close()
      })
    },
    close() {
      this.visible = false
      this.$nextTick(() => {
        this.$refs.ent.resetFields()
      })
    },
    open(ent, isEdit = false) {
      this.ent = ent
      this.isEdit = isEdit
      this.visible = true
      this.$nextTick(() => {

      })
    },
    reload() {
      this.$emit("load-data")
    }
  }
}
</script>
